<?php $this->load->view('common/admin_header');?>
<link rel="stylesheet" type="text/css" href="<?=base_url('themes/admins/js/fancybox/jquery.fancybox-1.3.4.css')?>" media="screen" />
<script type="text/javascript" src="<?=base_url('themes/admins/js/fancybox/jquery.fancybox-1.3.4.pack.js')?>"></script>
<link rel="stylesheet" href="<?=base_url('themes/admins/js/swfupload/swfupload.css')?>"><!--swfupload css-->
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
  $("a.show_img").fancybox({
    helpers:{title:{type:'float'}}
  });
});
</script>
<script>
$(document).ready(function(){
  $('a.swfupload_delete').live('click',function(){
    if(confirm('您確定刪除該圖片嗎?')){
      var urls=$(this).attr('href');
      var obj=$(this).parents("li");
      if(urls!='' && urls!=null){
        $.ajax({
          url:urls,
          type:'GET',
          success:function(msg){
            if(msg!=null && msg==1){
              obj.remove();
            }
          },
          error:function(){alert('Ajax 刪除批量上傳圖片出錯!');}
        })
      }
    }
    return false;
  });
});
</script>
<div class="block">
  <div class="block_head">
    <div class="bheadl"></div>
    <div class="bheadr"></div>
    <h2><?=$title;?> >> 相片集</h2>
    <ul>
      <li><a id="bulk_uploads" href="#">批量上傳圖片</a></li>
      <li><a id="add_image" href="#">新增</a></li>
      <li><a href="<?=site_url('admins/products').'?'.base64_decode($this->input->cookie('url_query'))?>">返回</a></li>
    </ul>
  </div>
  <!-- .block_head ends -->
  <div id="show_images" class="block_content">
    <?php $this->load->view('common/notify');?>
    <ul class="imglist">
      <?php if(isset($lists_count) && $lists_count>0):?>
      <?php foreach($images->result_array() as $image):?>
      <?php $thumb_img=isset($image['images']) && !empty($image['images'])?base_url().Imagelib::resize_thumb($image['images'],150,150):base_url().'themes/images/no_image-100x100.jpg';?>
      <input type="hidden" name="old_file_<?=$image['id']?>" value="<?=$image['images']?>" id="old_file_<?=$image['id']?>">
      <input type="hidden" name="old_sort_<?=$image['id']?>" value="<?=$image['sort_order']?>" id="old_sort_<?=$image['id']?>">
      <?php $description=!empty($image['description'])?json_decode($image['description'],true):''?>
      <?php foreach($languages->result() as $lag):?>
      <input type="hidden" name="old_desc<?=$lag->id?>_<?=$image['id']?>" value="<?=!empty($description) && isset($description[$lag->id])?$description[$lag->id]:''?>" id="old_desc<?=$lag->id?>_<?=$image['id']?>">
      <?php endforeach;?>
      <?php $urls=site_url('admins/products/album_delete/'.$image['id'].'/'.$album_id).'?images='.urlencode($image['images']);?>
      <li> <p><img image_id="<?=$image['id']?>" class="edit_image img-polaroid" src="<?=$thumb_img?>" /></p>
        <div class="btn-group">
           <a href="<?=base_url().$image['images']?>" rel="facebox" id="thumbnail" class="show_img btn">瀏覽</a>
           <a image_id="<?=$image['id']?>" class="edit_image btn" href="#">編輯</a>
           <a href="javascript:void(0);" onClick="delete_item('<?=$urls?>');" class="btn">刪除</a>
        </div>
      </li>
      <?php endforeach;?>
    <?php else:?>
      <div class="alert alert-info"><p>沒有上載任何圖片</p><a id="bulk_uploads_button" href="#" class="btn btn-inverse">批量上傳圖片</a></div>
    <?php endif;?>
    </ul>
    <!-- .tableactions ends -->
<!--      --><?php //echo $pagination;?>
    <!-- .pagination ends -->
    </div>
    <!-- .block_content ends -->
    <!--批量上傳-->
    <div id="batch_images" class="block_content" style="display:none;min-height:150px;text-align:center;">
    <!--批量插入多語言描述-->
    <div id="batch_description" style="display:none">
      <?php foreach($languages->result() as $lag):?>
      <p>描述:<?=$lag->name?><input type="text" name="description_<?=$lag->id?>[]"></p>
      <?php endforeach;?>
    </div>
    <form id="form" name="form" action="<?=site_url('admins/products/album_batch')?>" method="post">
      <input type="hidden" name="album_id" value="<?=set_value('album_id',isset($album_id)?$album_id:'')?>" />
      <div class="operate">
        <!-- 上傳按鈕 -->
        <div id="bulk-uploads" class="btn btn-success js-fileapi-wrapper">
           <div class="js-browse">
              <input type="file" name="Filedata" id="Filedata" multiple="multiple">
           </div>
           <div class="js-upload" style="display: none">
              <div class="progress progress-success">
                 <div class="js-progress bar"></div>
              </div>
              <span class="btn-txt">Uploading (<span class="js-size"></span>)</span>
           </div>
        </div>
      </div>
      <ul id="myul">
        <!--
          <li><input type="hidden" name="images[]">
          <img src="">
          <p>描述:<input type="text" name="description[]"></p>
          <p>排序:<input type="text" name="sort_order[]"></p>
          </li>
        -->
      </ul>
      <p id="divFileProgressContainer" style="clear:both;"></p>
      <p id="btn_sub" style="clear:both;display:none">
        <input id="button1" class="btn btn-primary" type="submit" name="btn_save" value="批量存儲" />
      </p>
    </form>
    </div><!--批量上傳結束-->



    <div class="bendl"></div>
    <div class="bendr"></div>
  </div>
  <!-- .block ends -->
<!--upload_image over-->
<div id="inlineContentDetails" style="display:none">
  <div class="ic_title">
    <h2>上傳/編輯圖片</h2>
    <a href="#" class="closeDOMWindow" title="關閉"><i class="icon-remove"></i></a>
  </div>
  <div style="padding:20px;">
  <form id="form" name="form" action="<?=site_url('admins/products/album_modify')?>" method="post" enctype="multipart/form-data">
    <input type="hidden" name="album_id" value="<?=set_value('album_id',isset($album_id)?$album_id:'')?>" />
    <input type="hidden" name="old_images" id="old_images">
    <input type="hidden" name="images_id" id="images_id">
    <input type="hidden" id="modify_method" name="modify_method" value="add">
      <!-- 預覽圖 -->
      <p>
        <a id="thumbnail" href="#" class="thumbnail">
          <img id="img_images" src="<?=base_url('themes/admins/img/no_image.png')?>" class="preview-img" style="max-width:300px">
        </a>
      </p>
      <p>
        <label>封面圖:</label>
        <div id="simple-btn" class="btn btn-success js-fileapi-wrapper">
           <div class="js-browse">
              <input type="file" name="Filedata" id="Filedata">
           </div>
           <div class="js-upload" style="display: none">
              <div class="progress progress-success">
                 <div class="js-progress bar"></div>
              </div>
              <span class="btn-txt">Uploading (<span class="js-size"></span>)</span>
           </div>
        </div>
        <input id="images" type="hidden" name="images" value="">
        <a href="#clear_img" tag="images" class="btn" style="display:none"><i class="icon-trash"></i> 清除圖像</a>
      </p>


    <p>
      <label class="required">排序:</label>
      <input type="text" id="sort_order" class="text small" style="width:200px;" name="sort_order" value="<?=set_value('sort_order')?>">
    </p>
    <?php foreach($languages->result() as $lag):?>
    <p>
      <label class="required">描述:<?=$lag->name?></label>
      <input id="description_modify_<?=$lag->id?>" type="text" class="text small description" name="description[<?=$lag->id?>]" value='<?=set_value('description['.$lag->id.']',isset($description[$lag->id])?$description[$lag->id]:'')?>'/>
    </p>
    <?php endforeach;?>
    <p>
      <input id="button1" class="btn btn-primary" type="submit" name="btn_save" value="儲 存" />
      <input id="button2" class="btn" type="reset" value="重 置"/>
    </p>
  </form>
  </div>
</div>

<!-- 插入fileapi控件 -->
<script type="text/javascript" charset="utf-8">
  window.FileAPI = {
      debug: true, // debug mode
      cors: false,    // if used CORS, set `true`
      media: false,   // if used WebCam, set `true`
      flashUrl:"<?=base_url('themes/admins/js/jquery.fileapi/FileAPI/FileAPI.flash.swf')?>",
      staticPath: 'themes/admins/js/jquery.fileapi/FileAPI/' // path to *.swf
  };
</script>
<script src="<?=base_url('themes/admins/js/jquery.fileapi/FileAPI/FileAPI.min.js')?>"></script>
<script src="<?=base_url('themes/admins/js/jquery.fileapi/FileAPI/FileAPI.exif.js')?>"></script>
<script src="<?=base_url('themes/admins/js/jquery.fileapi/jquery.fileapi.js')?>"></script>

<script type="text/javascript">
$(document).ready(function ($){

  //單文件上傳/修改開始
  $("a#add_image").click(function(){
     $.openDOMWindow({
        windowSourceID:'#inlineContentDetails', 
        width:500,
        height:600,
        loaderImagePath:"<?=base_url('themes/admins/img/loading.gif')?>"
      });
     $("#modify_method").val("add");
     $("#images_id").val('');
     $("#sort_order").val('0');
     $(".description").val('');
     $("#old_images").val('');
     return false;
  });
  //執行修改.
  $("a.edit_image").click(function(){
   $.openDOMWindow({
      windowSourceID:'#inlineContentDetails', 
      width:500,
      height:600,
      loaderImagePath:"<?=base_url('themes/admins/img/loading.gif')?>"
    });
    var id=$(this).attr('image_id');
    $("#modify_method").val("edit");
    $("#old_images").val($("#old_file_"+id).val());
    $('#img_images').attr('src',"<?=base_url()?>"+$("#old_file_"+id).val());
    $("#images_id").val(id);
    $("#sort_order").val($("#old_sort_"+id).val());
    <?php foreach($languages->result() as $lag):?>
    $("#description_modify_<?=$lag->id?>").val($("#old_desc<?=$lag->id?>_"+id).val());
    <?php endforeach;?>
    return false;
  });
  //文件上傳動作
    var folder=encodeURIComponent('products/');
    $('#simple-btn').fileapi({
       url:"<?=base_url('admins/upload/single_upload')?>",
       data: {'folder':folder,'_size':'260x260','_element_id':'images','_admin_id':"<?=$this->nsession->userdata('admin_id')?>",'_nickName':"<?=$this->nsession->userdata('nick_name')?>"},
       multiple: false,
       accept: 'image/*',
       maxSize: 2 * FileAPI.MB,
       autoUpload: true,
       clearOnComplete:true,
       elements: {
          size: '.js-size',
          active: { show: '.js-upload', hide: '.js-browse' },
          progress: '.js-progress'
       },
       onComplete:function(evt,uiEvt){
        var error = uiEvt.error;
        var result = uiEvt.result; // server response
        if(!error && result){
          //console.log(result);
          if(result.error){
            alert(result.error);
            return;
          }
          $("#"+result.element_id).val(result.img_path);
          $("#old_"+result.element_id).val(result.img_path);
          $("#img_"+result.element_id).attr('src',result.thumb_img);
          if ($('#thumbnail').length)
            $("#thumbnail").attr('href',result.http_img);
          if ($('a[href="#clear_img"]').length)
            $('a[href="#clear_img"]').show();
        }
      }
    });
    //清除圖片
    $('a[href="#clear_img"]').click(function() {
      var obj=$(this);
      var action="<?=site_url('admins/upload/delete')?>";
      var defaule_img="<?=base_url('themes/admins/img/no_image.png')?>";
      clear_img(obj,action,defaule_img);
      return false;
    });
  //單文件上傳/修改結束
  
  //批量上傳
  $("#bulk_uploads,#bulk_uploads_button").click(function(){
    $("#show_images").toggle();
    $("#batch_images").toggle();
    return false;
  });
  var folder='products';
  //上傳方法
    $('#bulk-uploads').fileapi({
       url:"<?=base_url('admins/upload/bulk_uploads')?>",
       data: {'folder':folder,'_size':'260x260','_element_id':'Filedata'},
       accept: 'image/*',
       maxSize: 2 * FileAPI.MB,
       autoUpload: true,
       clearOnComplete:true,
       multiple: true,
       elements: {
          size: '.js-size',
          active: { show: '.js-upload', hide: '.js-browse' },
          progress: '.js-progress'
       },
       onFileComplete:function(evt,uiEvt){
        var error = uiEvt.error;
        var result=uiEvt.result;
        if(!error && result){
          //console.log(result);
          if(result.error){
            alert(result.error);
            return;
          }
          addImage(result);//預覽圖片
        }
       }
    });  

  //打印臨時上傳圖片
  function addImage(obj) {
    var batch_description = $('#batch_description').html();
    var htmls='<li><input type="hidden" name="images[]" value="'+obj.img_path+'">';
    htmls+='<img src="'+obj.thumb_img+'">';
    if (batch_description!='') {
      htmls+=batch_description;
    }else{
      htmls+='<p><span>描述:</span><input type="text" style="width:150px" name="description[]"></p>'; 
    }
    //htmls+='<p><span>描述:</span><input type="text" style="width:150px" name="description[]"></p>';
    htmls+='<p><span>排序:</span><input type="text" style="width:150px" name="sort_order[]"></p>';
    htmls+='<p><a class="swfupload_delete" href="'+obj.delete_url+'">[刪除]</a></p>';
    htmls+="</li>"
    $("#myul").append(htmls).fadeIn('slow', 1);
    $("#btn_sub").show();
  }

});

</script>

<?php $this->load->view('common/admin_footer');?>
